<script setup lang="ts">
import * as echarts from 'echarts/core';
import {
    TitleComponent,
    type TitleComponentOption,
    ToolboxComponent,
    type ToolboxComponentOption,
    TooltipComponent,
    type TooltipComponentOption,
    GridComponent,
    type GridComponentOption,
    LegendComponent,
    type LegendComponentOption
} from 'echarts/components';
import { GaugeChart, type GaugeSeriesOption } from 'echarts/charts';
import { LineChart, type LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { onMounted } from 'vue';

echarts.use([
    GaugeChart,
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition
]);

type EChartsOption = echarts.ComposeOption<
    GaugeSeriesOption
    | TitleComponentOption
    | ToolboxComponentOption
    | TooltipComponentOption
    | GridComponentOption
    | LegendComponentOption
    | LineSeriesOption
>;

/**
 * 绘制过去24小时温度状态统计图表
 */
function drawDailyChart() {
    var chartDom = document.getElementById('dailyChart')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        // title: {
        //     text: 'Stacked Line'
        // },
        color: ['#91cc75', '#fac858', '#ee6666'],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['正常', '预警', '报警'],
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '正常',
                type: 'line',
                data: [135, 145, 146, 143, 141, 130, 150, 145, 140, 120, 140, 132, 134, 146, 144, 150, 137, 120, 145, 134, 125, 143, 126, 150],
                label: {
                    show: true, // 显示标签
                    color: '#fff'
                }
            },
            {
                name: '预警',
                type: 'line',
                data: [13, 5, 3, 4, 6, 15, 0, 5, 6, 20, 7, 10, 10, 3, 4, 0, 10, 21, 4, 12, 19, 7, 14, 0],
                label: {
                    show: true, // 显示标签
                    color: '#fff'
                }
            },
            {
                name: '报警',
                type: 'line',
                data: [2, 0, 1, 3, 3, 5, 0, 0, 4, 10, 3, 8, 6, 1, 2, 0, 3, 9, 1, 4, 6, 0, 10, 0],
                label: {
                    show: true, // 显示标签
                    color: '#fff'
                }
            }
        ]
    };

    option && myChart.setOption(option);

}

/**
 * 绘制当前温度的仪表盘图表
 */
function drawCurrentChart() {
    var chartDom = document.getElementById('instrumentPanel')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        series: [
            {
                type: 'gauge',
                axisLine: {
                    lineStyle: {
                        width: 20,
                        color: [
                            [0.6, '#4bbfb4'],
                            [0.8, '#fac858'],
                            [1, '#ee6666']
                        ]
                    }
                },
                pointer: {
                    itemStyle: {
                        color: 'auto'
                    }
                },
                axisTick: {
                    distance: -10,
                    length: 5,
                    lineStyle: {
                        color: '#fff',
                        width: 2
                    }
                },
                splitLine: {
                    distance: -20,
                    length: 20,
                    lineStyle: {
                        color: '#fff',
                        width: 2
                    }
                },
                axisLabel: {
                    color: 'inherit',
                    distance: 40,
                    fontSize: 10
                },
                detail: {
                    valueAnimation: true,
                    formatter: '{value} °C',
                    color: 'inherit',
                    fontSize: '18'
                },
                data: [
                    {
                        value: 55
                    }
                ]
            }
        ]
    };

    option && myChart.setOption(option);

}

let warnData = [
    { id: 1, time: '01-14 15:01', temperature: '65°C' },
    { id: 2, time: '01-14 15:21', temperature: '75°C' },
    { id: 3, time: '01-14 15:23', temperature: '61°C' },
    { id: 4, time: '01-14 15:31', temperature: '63°C' },
    { id: 5, time: '01-14 15:43', temperature: '70°C' },
    { id: 6, time: '01-14 15:51', temperature: '77°C' },
    { id: 7, time: '01-14 15:55', temperature: '71°C' },
]

let errorData = [
    { id: 1, time: '01-14 15:07', temperature: '85°C' },
    { id: 2, time: '01-14 15:16', temperature: '87°C' },
    { id: 3, time: '01-14 15:29', temperature: '91°C' },
    { id: 4, time: '01-14 15:37', temperature: '93°C' },
    { id: 5, time: '01-14 15:53', temperature: '90°C' },
]

onMounted(() => {
    drawDailyChart()
    drawCurrentChart()
})

</script>

<template>
    <div class="daily">
        <div class="dailyLable">
            过去24小时温度状态统计
        </div>
        <div id="dailyChart"></div>
    </div>
    <div class="hour">
        <div class="hourLable">
            过去一小时预警/报警统计
        </div>
        <div class="hourTable">
            <div class="warnTable">
                <div class="warnHeader">
                    <div class="timeTitle">预警时间</div>
                    <div class="temperatureTitle">实际温度</div>
                </div>
                <div class="warnInfo" v-for="item in warnData" :key="item.id">
                    <div class="time">{{ item.time }}</div>
                    <div class="temperature warnColor">{{ item.temperature }}</div>
                </div>
            </div>
            <div class="errorTable">
                <div class="errorHeader">
                    <div class="timeTitle">报警时间</div>
                    <div class="temperatureTitle">实际温度</div>
                </div>
                <div class="errorInfo" v-for="item in errorData" :key="item.id">
                    <div class="time">{{ item.time }}</div>
                    <div class="temperature errorColor">{{ item.temperature }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="currently">
        <div class="thresholdValue">
            <div class="warnValue">
                <span>预警温度阈值：</span>
                <span class="warnColor">60°C</span>
            </div>
            <div class="errorValue">
                <span>报警温度阈值：</span>
                <span class="errorColor">80°C</span>
            </div>
        </div>
        <div id="instrumentPanel"></div>
    </div>
</template>

<style scoped>
.daily {
    width: 96%;
    height: 450px;
    margin: 0 auto;
    border: 1px solid #596074;
}

.dailyLable {
    height: 30px;
    margin-left: 50px;
    font-style: 14px;
    line-height: 60px;
    letter-spacing: 2px;
}

#dailyChart {
    width: 100%;
    height: 420px;
}

.hour {
    float: left;
    width: 64%;
    height: 350px;
    margin-top: 20px;
    margin-left: 30px;
    border: 1px solid #596074;
}

.hourLable {
    height: 40px;
    padding-left: 30px;
    border-bottom: 1px solid #596074;
    font-style: 14px;
    line-height: 40px;
    letter-spacing: 2px;
}

.hourTable {
    display: flex;
}

.warnTable,
.errorTable {
    flex: 1;
    height: 310px;
}

.warnTable {
    border-right: 1px solid #596074;
}

.warnHeader,
.errorHeader {
    flex: 1;
    display: flex;
    ;
}

.timeTitle,
.temperatureTitle {
    flex: 1;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-bottom: 1px solid #596074;
    background-color: #1c3062;
}

.timeTitle {
    border-right: 1px solid #596074;
}

.warnInfo,
.errorInfo {
    display: flex;
    border-bottom: 1px solid #596074;
}

.time,
.temperature {
    flex: 1;
    height: 39px;
    line-height: 39px;
    text-align: center;
}

.time {
    border-right: 1px solid #596074;
}

.warnColor,
.errorColor {
    color: var(--warn-color);
    font-size: 16px;
    font-weight: 500;
}

.errorColor {
    color: var(--danger-color);
}

.currently {
    float: left;
    width: 30%;
    height: 350px;
    margin-top: 20px;
    margin-left: 27px;
    border: 1px solid #596074;
}

.thresholdValue {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #596074;
}

.warnValue,
.errorValue {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 18px;
}

#instrumentPanel {
    width: 100%;
    height: 290px;
}
</style>